import { Popover } from "antd";
import { Fragment } from "react";
import data from './data'

function ListWithMore({ renderItem,data=[],max}){
  const elements =  data.map((item)=> renderItem(item));
  // const elements =  data.map((item,index)=> renderItem(item,index,data));
  console.log(elements);
  const show = elements.slice(0,max);
  const hide = elements.slice(max);
  console.log(show);
  console.log(hide);

  return (
    <span className="exp-10-list-with-more">
      {show}
      {hide.length > 0 && (
        <Popover
          content={<div style={{maxWidth:500}}>{hide}</div>}
          >
            <span className="more-items-wrapper">
              and {" "}
              <span className="more-items-trigger">{hide.length} more...</span>
            </span>
        </Popover>
      )}
    </span>
  )
}

export default ()=>{
  return (
    <Fragment>
      <div className="exp-10-list-with-more">
        <h1>User Names</h1>
        <div className="user-names">
          Liked by :{""}
          <ListWithMore 
            renderItem={(user)=>{
              return <span className="user-name" key={user.name}>{user.name}</span>
            }}
            data={data}
            max = {3}
            />
        </div>
        <br /><br /><br />
        <hr />
        <div className="user-list">
          <div className="user-list-row user-list-row-head">
            <span className="user-name-cell">Name</span>
            <span>City</span>
            <span>Job Title</span>
          </div>
          <ListWithMore 
            renderItem={(user)=>{
              return (
                <div className="user-list-row" key={user.name}>
                  <span className="user-name-cell">{user.name}</span>
                  <span>{user.city}</span>
                  <span>{user.job}</span>
                </div>
              )
            }}
            data = {data}
            max = {5}
            />
        </div>
      </div>
    </Fragment>
  )
}